<script setup>

import {goService} from "../../tools/go";

</script>

<template>
  <view class="back">
    <view class="titli">
      <v-icon @click="goService" class="icon" icon="mdi-chevron-left"></v-icon>
      <h3>医疗服务</h3>
    </view>
    <!--  -->
    <view class="inp w">
      <view class="positioning">
        <text>桂林市</text>
        <v-icon class="icon" icon="mdi-menu-down"></v-icon>
      </view>
      <view class="ss">
        <input type="text">
        <button class="one">搜索</button>
      </view>
    </view>
    <view class="bg w">
    </view>
    <view class="onelist">
      <ul>
        <li v-for="(item,index) in onelist" >
          <img :src="item.img" alt="">
        </li>
      </ul>
    </view>
    <!-- 列表二 -->
    <view class="towlist">
      <ul>
        <li v-for="(item,index) in towlist" >
          <img :src="item.img" alt="">
          <text>{{item.name}}</text>
        </li>
      </ul>
    </view>
  </view>
</template>

<style scoped lang="scss">
@use "../../static/css/main";

.back{
  @include main.useTheme() {
    //列表二
    .towlist{
      ul{
        li{
          text{
            margin-top: 6px;
            font-size: 15px;
          }
          img{
            width: 40px;
            height: 40px;
            border-radius: 12px;
          }
          display: flex;
          align-items: center;
          flex-direction: column;
        }
        display: grid;
        grid-template-columns: repeat(4,1fr);
        width: 95%;
        margin: 10px auto;
        gap: 10px;
        justify-content: space-between;
      }
      width: 100%;
    }
    //列表一
    .onelist{
      ul{
        li{
          img{
            width: 120px;
            height: 100px;
            border-radius: 12px;
          }
        }
        display: flex;
        width: 95%;
        margin: 0 auto;
        justify-content: space-between;
      }
      width: 100%;
    }
    //背景
    .bg{
      img{
        width: 100%;
        height: 200px;
        border-radius: 12px;
      }
    }
    //搜索框
    .inp{
      .ss{
        input{
          width: 72%;
          height: 30px;
          margin-left: 5px;
        }
        button{
          width: 60px;
          height: 43px;
          line-height: 43px;
          color: #FFFFFF;
          font-size: 17px;

          border-radius: 12px;
          border: 1px solid #1093FE;
          margin-left: 5px;
          background: #1093FE;
        }
        display: flex;
        align-items: center;
        width: 70%;
        height: 30px;
        border-left: 1px solid #cacaca;
      }
      //
      .positioning{
        .icon{
        }
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      height: 50px;
      border-radius: 12px;
      border: 1px solid #1093FE;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .w{
      width: 95%;
      margin: 10px auto;
    }
    .titli {
      h3 {
        color: #000000;
        text-align: center;
        font-weight: 400;
        margin-left: 50px;
      }
      .icon {
        position: absolute; /* 将 icon 脱离文档流 */
        left: 10px;
        font-size: 30px;
      }
      position: relative; /* 父容器设置为相对定位 */
      display: flex;
      align-items: center; /* 垂直居中 */
      width: 100%;
      height: 13vh;
      background: #FFFFFF;
      border-radius: 0 0 12px 12px;
    }

    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
    }
  }
}

</style>